<template>
  <div v-loading="loading">
    <div class="header" v-show="monthDayArr.length !== 0">
      <div>
        <span class="typeBox typeBoxColor_blue"></span
        ><span class="typeText">全天已定广告</span>
        <span class="typeBox typeBoxColor_green"></span
        ><span class="typeText">部分时间已定广告</span>
        <span class="typeBox typeBoxColor_red"></span
        ><span class="typeText">预定全天广告</span>
        <span class="typeBox typeBoxColor_orange"></span
        ><span class="typeText">预定部分时间广告</span>
      </div>
      <div>
        <span class="calendarTime">{{
          `${currentYear}年${currentMonth}月`
        }}</span>

        <img
          src="~@/assets/icons/adTime/caret_bottom.png"
          class="caretBottomIcon"
          @click="selectMonthIconClick"
        />

        <el-date-picker
          v-model="monthData"
          type="month"
          placeholder="选择月"
          class="selectMonthDropdown"
          ref="selectMonthDatePicker"
          @change="selectMonthEvent"
        >
        </el-date-picker>

        <cs-btn
          type="primary"
          btnText="导出时间表"
          @click.native="downLoadTimeTable"
        />
      </div>
    </div>
    <cs-card>
      <!-- <div class="headerBox" :style="'width :' + getTableHeaderWidth + 'vw'"> -->
      <main
        class="tableContent"
        :style="'width :' + getTableHeaderWidth + 'vw'"
      >
        <div class="adTypeAndPositionOuterBox">
          <section class="adTypeAndPositionBox" ref="adTypeAndPositionBox">
            <div class="adTypeAndPosition adTypeAndPosition_fixed">
              广告类型及位置
            </div>
            <div
              v-for="item in timeLimeData"
              :key="item.id"
              class="adTypeAndPosition"
            >
              {{ item.sendType.name }}
            </div>
          </section>
        </div>

        <section
          class="mainTable"
          :style="'width :' + (getTableHeaderWidth - 12.5) + 'vw'"
        >
          <div class="tableHeader">
            <div
              class="calendarDayBox"
              v-for="item in monthDayArr"
              :key="item.day"
            >
              <span class="day" :class="getTodayBoxStyle(item.day)">{{
                item.day
              }}</span>
              <span>{{ item.week }}</span>
            </div>
          </div>
          <!-- 广告时间线 -->
          <div
            class="adTimeLimeBox"
            ref="adTimeLimeBox"
            :style="'width :' + (getTableHeaderWidth - 12.5) + 'vw'"
          >
            <div v-for="(item, index) in timeLimeData" :key="item.id">
              <div
                v-if="getShowTimeLineStatus(item.fromDate, item.toDate, item)"
                class="tableTr"
                :style="'width :' + (getTableHeaderWidth - 12.5) + 'vw'"
              >
                <!-- <span class="adTypeAndPosition">{{ item.sendType.name }}</span> -->
                <el-popover
                  placement="top"
                  trigger="hover"
                  v-if="item.timeScales"
                >
                  <div>
                    <div>广告名:{{ item.name }}</div>
                    <div>
                      {{
                        `投放时间:${item.fromDate.split(" ")[0]}至${
                          item.toDate.split(" ")[0]
                        }`
                      }}
                    </div>
                    <div>
                      {{
                        `投放时间段:${
                          item.timeScales.length === 24
                            ? "全天"
                            : item.timeScales.join(" ")
                        }`
                      }}
                    </div>
                  </div>
                  <div
                    class="timeLine"
                    :class="
                      getTimeLimeStyle(item.timeScales.length, item.reserved)
                    "
                    :style="
                      getTimeLineWidthAndDistance(item.fromDate, item.toDate)
                    "
                    slot="reference"
                  >
                    <div class="timeLimeInnerBox" ref="timeLimeInnerBoxRef">
                      <div class="timeLimeTextBox">
                        <img
                          :src="
                            item.timeScales.length === 24
                              ? yd_red_png
                              : yd_orange_png
                          "
                          class="timeLineIcon"
                          v-if="item.reserved === 1"
                        />
                        <span class="timeLineName">广告名:{{ item.name }}</span>
                        <div>
                          <span class="launchTime">{{
                            `投放时间:${item.fromDate.split(" ")[0]}至${
                              item.toDate.split(" ")[0]
                            }`
                          }}</span>
                          <span class="launchTimeSlot">{{
                            `投放时间段:${
                              item.timeScales.length === 24
                                ? "全天"
                                : item.timeScales.join(" ")
                            }`
                          }}</span>
                        </div>
                      </div>
                      <span
                        class="eclipase"
                        :class="
                          getTimeLimeStyle(
                            item.timeScales.length,
                            item.reserved,
                            index
                          )
                        "
                        >...</span
                      >

                      <!-- <div>
                  <span class="launchTime">{{
                    `投放时间:${item.fromDate.split(" ")[0]}至${
                      item.toDate.split(" ")[0]
                    }`
                  }}</span>
                  <span class="launchTimeSlot">{{
                    `投放时间段:${
                      item.timeScales.length === 24
                        ? "全天"
                        : item.timeScales.join(" ")
                    }`
                  }}</span>
                </div> -->
                    </div>
                  </div>
                </el-popover>
                <div
                  class="calendarDayBox"
                  v-for="item in monthDayArr"
                  :key="item.day"
                ></div>
              </div>
            </div>
          </div>
          <el-empty
            description="暂无数据"
            v-if="!timeLimeData.length"
          ></el-empty>
        </section>
      </main>

      <!-- </div> -->
    </cs-card>
  </div>
</template>

<script>
import CsCard from "@/components/CsCard/CsCard.vue";
import CsBtn from "@/components/CsBtn/CsBtn.vue";

import _ from "lodash";

import { queryAdTimeLineByYearMonth } from "@/api/ad";

export default {
  name: "adTime",
  components: {
    CsCard,
    CsBtn,
  },
  data() {
    return {
      yd_red_png: require("@/assets/icons/adTime/yd_red.png"),
      yd_orange_png: require("@/assets/icons/adTime/yd_orange.png"),
      currentYear: 0,
      currentMonth: 0,
      currentDay: 0,
      todayTimeData: {
        month: 0,
        today: 0,
      },
      monthDayNum: 0,
      monthDayArr: [],
      monthData: "",
      loading: false,
      isLeftScroll: false,
      timeLimeData: [
        // {
        //   id: 20,
        //   owner: "officia sint sunt in",
        //   name: "a",
        //   sendType: {
        //     id: 8,
        //     name: "banner轮播投放",
        //     value: "1",
        //   },
        //   contentType: null,
        //   imgPos: 1,
        //   sendPos: null,
        //   coverUrl: "http://nfqefa.net/tdpewoeug",
        //   ratioFlag: 90,
        //   popupRule: 7,
        //   clicked: 1,
        //   reserved: 0,
        //   content: "in sit",
        //   fromDate: "2022-01-30 00:00:00",
        //   toDate: "2022-03-15 00:00:00",
        //   status: 1,
        //   createBy: null,
        //   updateBy: null,
        //   createTime: "2022-03-21 10:31:13",
        //   updateTime: "2022-03-21 10:31:13",
        //   timeScales: ["00:00", "16:00", "17:00", "18:00", "19:00"],
        //   visitNumber: 0,
        //   simpleCommunityVos: null,
        // },
        // {
        //   id: 21,
        //   owner: "officia sint sunt in",
        //   name: "b",
        //   sendType: {
        //     id: 8,
        //     name: "banner轮播投放",
        //     value: "1",
        //   },
        //   contentType: null,
        //   imgPos: 2,
        //   sendPos: null,
        //   coverUrl: "http://nfqefa.net/tdpewoeug",
        //   ratioFlag: 90,
        //   popupRule: 7,
        //   clicked: 1,
        //   reserved: 0,
        //   content: "in sit",
        //   fromDate: "2022-01-30 00:00:00",
        //   toDate: "2023-06-30 00:00:00",
        //   status: 1,
        //   createBy: null,
        //   updateBy: null,
        //   createTime: "2022-03-21 10:31:30",
        //   updateTime: "2022-03-21 10:31:30",
        //   timeScales: ["00:00", "16:00", "17:00", "18:00", "19:00"],
        //   visitNumber: 0,
        //   simpleCommunityVos: null,
        // },
        // {
        //   id: 22,
        //   owner: "officia sint sunt in",
        //   name: "c",
        //   sendType: {
        //     id: 8,
        //     name: "banner轮播投放",
        //     value: "1",
        //   },
        //   contentType: null,
        //   imgPos: 3,
        //   sendPos: null,
        //   coverUrl: "http://nfqefa.net/tdpewoeug",
        //   ratioFlag: 90,
        //   popupRule: 7,
        //   clicked: 1,
        //   reserved: 0,
        //   content: "in sit",
        //   fromDate: "2022-03-05 00:00:00",
        //   toDate: "2022-03-18 00:00:00",
        //   status: 1,
        //   createBy: null,
        //   updateBy: null,
        //   createTime: "2022-03-21 10:31:32",
        //   updateTime: "2022-03-21 10:31:32",
        //   timeScales: ["00:00", "16:00", "17:00", "18:00", "19:00"],
        //   visitNumber: 0,
        //   simpleCommunityVos: null,
        // },
        // {
        //   id: 23,
        //   owner: "officia sint sunt in",
        //   name: "d",
        //   sendType: {
        //     id: 8,
        //     name: "banner轮播投放",
        //     value: "1",
        //   },
        //   contentType: null,
        //   imgPos: 4,
        //   sendPos: null,
        //   coverUrl: "http://nfqefa.net/tdpewoeug",
        //   ratioFlag: 90,
        //   popupRule: 7,
        //   clicked: 1,
        //   reserved: 0,
        //   content: "in sit",
        //   fromDate: "2022-03-13 00:00:00",
        //   toDate: "2022-06-30 00:00:00",
        //   status: 1,
        //   createBy: null,
        //   updateBy: null,
        //   createTime: "2022-03-21 10:31:33",
        //   updateTime: "2022-03-21 10:31:33",
        //   timeScales: ["00:00", "16:00", "17:00", "18:00", "19:00"],
        //   visitNumber: 0,
        //   simpleCommunityVos: null,
        // },
        // {
        //   id: 24,
        //   owner: "officia sint sunt in",
        //   name: "e",
        //   sendType: {
        //     id: 8,
        //     name: "banner轮播投放",
        //     value: "1",
        //   },
        //   contentType: null,
        //   imgPos: 2,
        //   sendPos: null,
        //   coverUrl: "http://nfqefa.net/tdpewoeug",
        //   ratioFlag: 90,
        //   popupRule: 7,
        //   clicked: 1,
        //   reserved: 0,
        //   content: "in sit",
        //   fromDate: "2022-03-05 00:00:00",
        //   toDate: "2023-06-30 00:00:00",
        //   status: 0,
        //   createBy: null,
        //   updateBy: null,
        //   createTime: "2022-03-21 10:31:34",
        //   updateTime: "2022-03-21 16:07:26",
        //   timeScales: ["00:00", "16:00", "17:00", "18:00", "19:00"],
        //   visitNumber: 0,
        //   simpleCommunityVos: null,
        // },
        // {
        //   id: 25,
        //   owner: "officia sint sunt in",
        //   name: "f",
        //   sendType: {
        //     id: 8,
        //     name: "banner轮播投放",
        //     value: "1",
        //   },
        //   contentType: null,
        //   imgPos: 2,
        //   sendPos: null,
        //   coverUrl: "http://nfqefa.net/tdpewoeug",
        //   ratioFlag: 90,
        //   popupRule: 7,
        //   clicked: 1,
        //   reserved: 0,
        //   content: "in sit",
        //   fromDate: "2020-03-30 00:00:00",
        //   toDate: "2022-03-17 00:00:00",
        //   status: 1,
        //   createBy: null,
        //   updateBy: null,
        //   createTime: "2022-03-21 10:31:35",
        //   updateTime: "2022-03-21 16:07:32",
        //   timeScales: ["00:00", "16:00", "17:00", "18:00", "19:00"],
        //   visitNumber: 0,
        //   simpleCommunityVos: null,
        // },
        // {
        //   id: 26,
        //   owner: "officia sint sunt in",
        //   name: "g",
        //   sendType: {
        //     id: 8,
        //     name: "banner轮播投放",
        //     value: "1",
        //   },
        //   contentType: null,
        //   imgPos: 3,
        //   sendPos: null,
        //   coverUrl: "http://nfqefa.net/tdpewoeug",
        //   ratioFlag: 90,
        //   popupRule: 7,
        //   clicked: 1,
        //   reserved: 0,
        //   content: "in sit",
        //   fromDate: "2021-01-30 00:00:00",
        //   toDate: "2022-06-30 00:00:00",
        //   status: 1,
        //   createBy: null,
        //   updateBy: null,
        //   createTime: "2022-03-21 10:31:36",
        //   updateTime: "2022-03-21 16:07:32",
        //   timeScales: ["00:00", "16:00", "17:00", "18:00", "19:00"],
        //   visitNumber: 0,
        //   simpleCommunityVos: null,
        // },
        // {
        //   id: 27,
        //   owner: "officia sint sunt in",
        //   name: "h",
        //   sendType: {
        //     id: 8,
        //     name: "banner轮播投放",
        //     value: "1",
        //   },
        //   contentType: null,
        //   imgPos: 1,
        //   sendPos: null,
        //   coverUrl: "http://nfqefa.net/tdpewoeug",
        //   ratioFlag: 90,
        //   popupRule: 7,
        //   clicked: 1,
        //   reserved: 0,
        //   content: "in sit",
        //   fromDate: "2021-01-30 00:00:00",
        //   toDate: "2023-06-30 00:00:00",
        //   status: 1,
        //   createBy: null,
        //   updateBy: null,
        //   createTime: "2022-03-21 10:31:38",
        //   updateTime: "2022-03-21 16:07:30",
        //   timeScales: ["00:00", "16:00", "17:00", "18:00", "19:00"],
        //   visitNumber: 0,
        //   simpleCommunityVos: null,
        // },
        // {
        //   id: 28,
        //   owner: "officia sint sunt in",
        //   name: "i",
        //   sendType: {
        //     id: 8,
        //     name: "banner轮播投放",
        //     value: "1",
        //   },
        //   contentType: null,
        //   imgPos: 1,
        //   sendPos: null,
        //   coverUrl: "http://nfqefa.net/tdpewoeug",
        //   ratioFlag: 90,
        //   popupRule: 7,
        //   clicked: 1,
        //   reserved: 0,
        //   content: "in sit",
        //   fromDate: "2022-01-30 00:00:00",
        //   toDate: "2022-06-30 00:00:00",
        //   status: 1,
        //   createBy: null,
        //   updateBy: null,
        //   createTime: "2022-03-21 10:31:39",
        //   updateTime: "2022-03-21 16:04:34",
        //   timeScales: ["00:00", "16:00", "17:00", "18:00", "19:00"],
        //   visitNumber: 0,
        //   simpleCommunityVos: null,
        // },
        // {
        //   id: 29,
        //   owner: "officia sint sunt in",
        //   name: "j",
        //   sendType: {
        //     id: 8,
        //     name: "banner轮播投放",
        //     value: "1",
        //   },
        //   contentType: null,
        //   imgPos: 1,
        //   sendPos: null,
        //   coverUrl: "http://nfqefa.net/tdpewoeug",
        //   ratioFlag: 90,
        //   popupRule: 7,
        //   clicked: 1,
        //   reserved: 0,
        //   content: "in sit",
        //   fromDate: "2022-03-02 00:00:00",
        //   toDate: "2022-03-05 00:00:00",
        //   status: 1,
        //   createBy: null,
        //   updateBy: null,
        //   createTime: "2022-03-21 10:31:40",
        //   updateTime: "2022-03-21 16:11:24",
        //   timeScales: ["00:00", "16:00", "17:00", "18:00", "19:00"],
        //   visitNumber: 0,
        //   simpleCommunityVos: null,
        // },
      ],
    };
  },
  created() {
    this.getCurrentDate();
    this.queryAdTimeLineByYearMonth();
    this.getTodayTimeData();
  },
  mounted() {
    this.adTimeTableScroll();
  },
  beforeDestroy() {
    // this.removeLeftTableScroll();
    // this.removeMainTableScroll();
  },
  computed: {
    getTableHeaderWidth() {
      return this.monthDayNum * 3.59375 + 12.5;
      // this.monthDayNum * 69 + 240
    },
    leftTableSection() {
      return this.$refs.adTypeAndPositionBox;
    },
    mainTableSection() {
      return this.$refs.adTimeLimeBox;
    },
  },
  methods: {
    // 广告时间线表格滚动函数
    adTimeTableScroll() {
      // console.log(this.mainTableSection);
      // this.mainTableSection.addEventListener(
      //   "scroll",
      //   () => {
      //     console.log("滚动");
      //     console.log(this.mainTableSection.scrollTop);
      //     this.leftTableSection.scrollTop = this.mainTableSection.scrollTop;
      //   },
      //   true
      // );

      this.$nextTick(() => {
        // console.log(document.querySelector(".el-card"));
        document
          .querySelector(".el-card")
          .addEventListener("mouseover", (e) => {
            // console.log(e.target.className);
            //  if (e.target.className === "el-card cs-card is-always-shadow") {
            //   document.querySelector(".el-card").addEventListener(
            //     "scroll",
            //     () => {
            //       if (e.target.scrollLeft > 0) {
            //         // document
            //         //   .querySelectorAll(".adTypeAndPosition")
            //         //   .forEach((item) => {
            //         //     item.style.className =
            //         //       "adTypeAndPosition adTypeAndPosition_fixed";
            //         //   });
            //         console.log("滚动");
            //         this.aa = true;
            //       } else if (e.target.scrollLeft === 0) {
            //         this.aa = false;
            //       }
            //     },
            //     true
            //   );
            // } else
            if (e.target.className === "el-card cs-card is-always-shadow") {
              document.querySelector(".el-card").addEventListener(
                "scroll",
                () => {
                  // console.log("滚动", this.leftTableSection.scrollTop);
                  // console.log("滚动b", this.leftTableSectionTopNum);
                  // console.log(this.isLeftScroll);
                  if (this.isLeftScroll) {
                    this.mainTableSection.scrollTop = JSON.parse(
                      JSON.stringify(this.leftTableSection.scrollTop)
                    );
                  } else {
                    this.leftTableSection.scrollTop = JSON.parse(
                      JSON.stringify(this.mainTableSection.scrollTop)
                    );
                  }
                },
                true
              );
            } else if (
              [
                "adTypeAndPositionBox",
                "adTypeAndPosition",
                "adTypeAndPosition adTypeAndPosition_fixed",
              ].indexOf(e.target.className) !== -1
            ) {
              this.removeMainTableScroll();
              this.leftTableSection.addEventListener(
                "scroll",
                this.leftTableScroll,
                true
              );
              // console.log("--------------------------aaaaaaaaaaaaaaaaaaaa");
            } else if (
              [
                "adTimeLimeBox",
                "calendarDayBox",
                "tableTr",
                "timeLine",
                "timeLimeInnerBox",
                "timeLimeTextBox",
                "timeLineIcon",
                "timeLineName",
                "launchTime",
                "launchTimeSlot",
                "eclipase",
              ].indexOf(e.target.className) !== -1
            ) {
              this.removeLeftTableScroll();
              this.mainTableSection.addEventListener(
                "scroll",
                this.mainTableScroll,
                true
              );
              // console.log("----------------bbbbbbbbbbbbbbbbbbb");
            }
          });
      });

      // this.$nextTick(() => {
      //   const mainTableSection =
      //     document.documentElement.querySelector(".mainTable");
      //   const leftTableSection = document.documentElement.querySelector(
      //     ".adTypeAndPositionBox"
      //   );

      //   mainTableSection.addEventListener(
      //     "scroll",
      //     (e) => {
      //       // console.log(e);
      //       // if (e.target.className === "adTimeLimeBox") {
      //       //   console.log(e.target.className);
      //       this.leftTableSection.scrollTop = e.target.scrollTop;
      //       //   return;
      //       // } else if (e.target.className === "adTypeAndPositionBox") {
      //       //   // console.log(e.target.className);
      //       //   // this.mainTableSection.scrollTop = e.target.scrollTop;
      //       //   // console.log(this.mainTableSection.scrollTop);
      //       //   // return;
      //       //   console.log("bb");
      //       // }

      //       // console.log(this.leftTableSection.scrollTop);
      //     },
      //     true
      //   );
      // leftTableSection.addEventListener(
      //   "scroll",
      //   (e) => {
      //     if (e.target.className === "adTypeAndPositionBox") {
      //       this.mainTableSection.scrollTop = e.target.scrollTop;
      //       console.log("bb");
      //     }

      //     console.log(this.leftTableSection.scrollTop);
      //   },
      //   true
      // );
      // });
    },
    // 左表格滚动
    leftTableScroll(e) {
      // this.removeMainTableScroll();
      this.mainTableSection.scrollTop = e.target.scrollTop;
      this.isLeftScroll = true;
    },
    // 主表格滚动
    mainTableScroll(e) {
      // this.removeLeftTableScroll();
      // console.log(e.target.scrollTop);
      this.leftTableSection.scrollTop = e.target.scrollTop;
      this.leftTableSectionTopNum = e.target.scrollTop;
      this.isLeftScroll = false;
    },
    // 移除左表格滚动监听事件
    removeLeftTableScroll() {
      // console.warn("aaa");
      this.$nextTick(() => {
        this.leftTableSection.removeEventListener(
          "scroll",
          this.leftTableScroll,
          true
        );
      });
    },
    // 移除主表格滚动监听事件
    removeMainTableScroll() {
      // console.warn("bbb");
      this.$nextTick(() => {
        // console.log(removeEventListener());
        this.mainTableSection.removeEventListener(
          "scroll",
          this.mainTableScroll,
          true
        );
      });
    },
    // 获取当前日期
    getCurrentDate() {
      return new Promise((resolve) => {
        // 刚进入页面数据为0时
        if (this.currentYear === 0) {
          const currentDate = new Date();
          this.currentYear = currentDate.getFullYear();
          this.currentMonth = currentDate.getMonth() + 1;
          this.currentDay = currentDate.getDate();

          // 当月有多少天
          this.monthDayNum = new Date(
            this.currentYear,
            this.currentMonth,
            0
          ).getDate();
          this.monthDayArr = [];
          for (let i = 1; i <= this.monthDayNum; i++) {
            this.monthDayArr.push({
              day: i,
              week: this.getWeek(this.currentYear, this.currentMonth, i),
            });
          }
          resolve("updateSuccess");
          // 如果时间有值
        } else {
          // 当月有多少天
          this.monthDayNum = new Date(
            this.currentYear,
            this.currentMonth,
            0
          ).getDate();
          this.monthDayArr = [];
          for (let i = 1; i <= this.monthDayNum; i++) {
            this.monthDayArr.push({
              day: i,
              week: this.getWeek(this.currentYear, this.currentMonth, i),
            });
          }
          resolve("updateSuccess");
        }
      });
    },
    // 获取星期几
    getWeek(year, month, day) {
      const date = new Date(year, parseInt(month - 1), day);
      return "星期" + "日一二三四五六".charAt(date.getDay());
    },
    // 选择月份下拉图标被点击显示月份下拉框
    selectMonthIconClick() {
      if (this.$refs.selectMonthDatePicker.$el)
        document
          .querySelector(".selectMonthDropdown")
          .querySelector("input")
          .focus();
    },
    // 确定选择月份
    async selectMonthEvent() {
      this.timeLimeData = [];
      console.log(this.timeLimeData.length);
      this.currentYear = this.monthData.getFullYear();
      this.currentMonth = this.monthData.getMonth() + 1;

      await this.getCurrentDate();
      await this.queryAdTimeLineByYearMonth();
      this.$message({
        message: `已切换到${this.currentYear}年${this.currentMonth}月`,
        type: "success",
      });
    },
    // 获取当天当月时间数据(开发用)
    getTodayTimeData() {
      const date = new Date();
      this.todayTimeData.month = date.getMonth() + 1;
      this.todayTimeData.today = date.getDate();
    },
    // 获取当前时间盒子的样式
    getTodayBoxStyle(day) {
      if (
        this.currentMonth === this.todayTimeData.month &&
        day === this.todayTimeData.today
      ) {
        return "day_active";
      } else {
        return "";
      }
    },
    // 获取某条时间线样式
    getTimeLimeStyle(timeScaleLength, reserved, index) {
      if (index >= 0) {
        this.$nextTick(() => {
          if (!this.$refs.timeLimeInnerBoxRef[index]) return;
          let innerEleWidth = 0;
          this.$refs.timeLimeInnerBoxRef[index].children[0].children.forEach(
            (item) => {
              innerEleWidth += item.clientWidth;
            }
          );

          if (
            this.$refs.timeLimeInnerBoxRef[index].clientWidth >= innerEleWidth
          ) {
            this.$refs.timeLimeInnerBoxRef[index].children[1].style.display =
              "none";
          } else {
            this.$refs.timeLimeInnerBoxRef[index].children[1].style.display =
              "visible";
          }
        });
      }

      if (timeScaleLength === 24 && reserved === 0) {
        return "typeBoxColor_blue";
      } else if (timeScaleLength < 24 && reserved === 0) {
        return "typeBoxColor_green";
      } else if (timeScaleLength === 24 && reserved === 1) {
        return "typeBoxColor_red";
      } else if (timeScaleLength < 24 && reserved === 1) {
        return "typeBoxColor_orange";
      }
    },
    // 获取是否显示时间线状态
    getShowTimeLineStatus(fromDate, toDate, item) {
      const formatFromData = fromDate.split(" ")[0].split("-");
      const formatToDate = toDate.split(" ")[0].split("-");
      formatFromData.pop();
      formatToDate.pop();
      formatFromData.push("1");
      formatToDate.push("1");

      const currentDate = new Date(
        `${this.currentYear}-${this.currentMonth}-1`
      ).getTime();

      if (
        new Date(formatFromData.join("-")).getTime() <= currentDate &&
        new Date(formatToDate.join("-")).getTime() >= currentDate
      ) {
        return true;
      } else {
        console.log(new Date(formatFromData.join("-")).getTime() > currentDate);
        return false;
      }
      // return true;
    },
    // 获取时间线的长度和距离
    getTimeLineWidthAndDistance(fromDate, toDate) {
      const formatFromData = fromDate.split(" ")[0].split("-");
      const formDate_year = formatFromData[0];
      const formDate_month = formatFromData[1];
      const formDate_day = formatFromData[2];

      const formatToDate = toDate.split(" ")[0].split("-");
      const toDate_year = formatToDate[0];
      const toDate_month = formatToDate[1];
      const toDate_day = formatToDate[2];

      // 如果广告开始年份等于当前年份
      if (formDate_year == this.currentYear) {
        // 如果广告开始月份等于当前月份
        if (formDate_month == (this.currentMonth + "").padStart(2, "0")) {
          // 如果广告结束年份等于当前年份
          if (toDate_year == this.currentYear) {
            // 如果广告结束月份等于当前月份
            // 返回left为开始天数乘距离，width为结束天数减开始天数乘距离
            if (toDate_month == (this.currentMonth + "").padStart(2, "0")) {
              return `left: ${formDate_day * 3.59375 - 2.86458}vw; width: ${
                (toDate_day - formDate_day + 1) * 3.59375 - 1.66667
              }vw;`;
              // left: 开始日期*69+240-55px; width: (结束日期减开始日期 + 1)*69-32px;
            } else {
              // 如果广告结束月份不等于当前月份
              return `left: ${formDate_day * 3.59375 - 2.86458}vw; width: ${
                (this.monthDayArr.length - formDate_day) * 3.59375 + 2.86458
              }vw;`;
              // left: 开始日期*69+240-55px; width: (本月天数减开始日期)*69-55px;
            }
          } else {
            // 如果广告结束年份不等于当前年份
            return `left: ${formDate_day * 3.59375 - 2.86458}vw; width: ${
              (this.monthDayArr.length - formDate_day) * 3.59375 + 2.86458
            }vw;`;
            // left: 开始日期*69+240-55px; width: (本月天数减开始日期)*69-55px;
          }
        } else {
          // 如果广告开始月份不等于当前月份
          // 如果广告结束年份等于当前年份
          if (toDate_year == this.currentYear) {
            // 如果广告结束月份等于当前月份
            if (toDate_month == (this.currentMonth + "").padStart(2, "0")) {
              console.log("bbb");
              return `left: ${0}vw; width: ${
                toDate_day * 3.59375 - 1.66667
              }vw;`;
              // left 24px width: 结束日期*69
            } else {
              // 如果广告结束月份不等于当前月份
              return `left: ${0}vw; width: ${
                this.monthDayArr.length * 3.59375
              }vw;`;
              // left 24px width: 当前月份天数*69
            }
          } else {
            // 如果广告结束年份不等于当前年份
            return `left: ${0}vw; width: ${
              this.monthDayArr.length * 3.59375
            }vw;`;
            // left 24px width: 当前月份天数*69
          }
        }
      } else {
        // 如果广告开始年份不等于当前年份
        // 如果广告结束年份等于当前年份
        if (toDate_year == this.currentYear) {
          // 如果广告结束月份等于当前月份
          if (toDate_month == (this.currentMonth + "").padStart(2, "0")) {
            return `left: ${0}vw; width: ${toDate_day * 3.59375 - 1.66667}vw;`;
            // left 24px width: 结束日期*69-32px
          } else {
            // 如果广告结束月份不等于当前月份
            return `left: ${0}vw; width: ${
              this.monthDayArr.length * 3.59375
            }vw;`;
            // left 24px width: 当前月份天数*69
          }
        } else {
          // 如果广告结束年份不等于当前年份
          return `left: ${0}vw; width: ${this.monthDayArr.length * 3.59375}vw;`;
          // left 24px width: 当前月份天数*69
        }
      }
    },
    // isFixedTableLeft(index) {
    //   // index += 1;
    //   // if (this.aa) {
    //   //   return `position: absolute;
    //   //           top: ${208 + index * 72}px;
    //   //           left: 81px;
    //   //           width: 223px;
    //   //           text-align: center;
    //   //           background: #fff;
    //   //           z-index: 99`;
    //   // } else {
    //   //   return "";
    //   // }
    //   console.log("bb");
    //   if (this.aa) {
    //     console.log("aa");
    //     return `position: absolute;
    //             top: 0;
    //             left: 0px;
    //             width: 223px;
    //             text-align: center;
    //             background: #fff;
    //             z-index: 99`;
    //   }
    // },
    // 根据年月查询广告时间线数据
    async queryAdTimeLineByYearMonth() {
      this.loading = true;
      const data = await queryAdTimeLineByYearMonth({
        fromDate: `${this.currentYear}-${(this.currentMonth + "").padStart(
          2,
          "0"
        )}-00 00:00:00`,
      });
      console.log(data);
      if (data.code === 0 && data.data) {
        console.log("aaa");
        this.timeLimeData = data.data;
      }
      this.loading = false;
    },
    // 下载广告时间表
    downLoadTimeTable: _.throttle(function () {
      console.log(this.timeLimeData);
      if (!this.timeLimeData.length) {
        this.$message({
          message: "当前月份没有需要导出的数据",
          type: "warning",
        });
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: `正在导出${this.currentYear}年${this.currentMonth}月时间表`,
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = [
          "id",
          "广告主",
          "广告名称",
          "投放类型",
          "内容类型",
          "图片位置",
          "投放位置",
          "封面",
          "比例标志位",
          "弹出规则",
          "是否点击后不在弹出",
          "是否预留",
          "内容",
          "投放开始时间",
          "投放结束时间",
          "状态",
          "创建人",
          "更新人",
          "创建时间",
          "更新时间",
          "时间刻度",
          "浏览次数",
          "投放小区",
        ];
        const filterVal = [
          "id",
          "owner",
          "name",
          "sendType",
          "contentType",
          "imgPos",
          "sendPos",
          "coverUrl",
          "ratioFlag",
          "popupRule",
          "clicked",
          "reserved",
          "content",
          "fromDate",
          "toDate",
          "status",
          "createBy",
          "updateBy",
          "createTime",
          "updateTime",
          "timeScales",
          "visitNumber",
          "community",
        ];

        const data = this.formatJson(filterVal, this.timeLimeData);
        console.log(data);
        excel.export_json_to_excel({
          header: tHeader, //表头 必填
          data, //具体数据 必填
          filename: `广告时间表(${this.currentYear}.${this.currentMonth})`, //非必填
          autoWidth: true, //非必填
          bookType: "xlsx", //非必填
        });
        loading.close();
      });
    }, 2000),
    // 格式化JSON
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === "sendType") {
            return v[j] ? v[j].name : "";
          } else if (j === "reserved") {
            return v[j] == 1 ? "预留" : "不预留";
          } else if (j === "contentType") {
            return v[j] ? v[j].name : "";
          } else if (j === "imgPos") {
            return v[j] ? v[j].name : "";
          } else if (j === "sendPos") {
            return v[j] ? v[j].name : "";
          } else if (j === "ratioFlag") {
            return v[j] ? v[j].name : "";
          } else if (j === "popupRule") {
            return v[j] ? v[j].name : "";
          } else if (j === "clicked") {
            return v[j] == 1 ? "是" : "否";
          } else if (j === "status") {
            return v[j] == 1 ? "可用" : "不可用";
          } else {
            return v[j];
          }
        })
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.el-card {
  overflow-x: scroll;
  padding-top: 80px;
  margin: 26px;

  // 给表格最后一个元素，即最后一行表格添加border-bottom
  ::v-deep .el-card__body {
    :first-child {
      // border-top: 1px solid #dddddd;
      // border-bottom: 1px solid #dddddd;
      // border-bottom: 0;
    }
  }
}
// 改变选择月份下拉框样式
// ::v-deep .el-date-editor.el-input {
//   margin: 0 10px;
// }

// 头部样式
.header {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 27px;
  width: calc(100% - 100px);
  height: 80px;
  margin: 0 26px 0 52px;

  .typeBox {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    margin-right: 6px;
  }

  .typeText {
    font-size: 18px;
    color: #888888;
    margin-right: 36px;
  }

  .calendarTime {
    font-size: 24px;
    color: #000000;
    vertical-align: middle;
    margin-right: 10px;
  }

  .caretBottomIcon {
    cursor: pointer;
    vertical-align: middle;
  }

  // 隐藏选择月份下拉框样式
  .selectMonthDropdown {
    position: fixed;
    top: 140px;
    right: 20px;
    z-index: -1;
  }

  .cs-btn {
    margin-left: 27px;
    margin-right: 0;
    font-weight: 500;
  }
}

.typeBoxColor_blue {
  color: #006eff;
  border: 1px solid #006eff !important;
  background: #d7e8ff;
}

.typeBoxColor_green {
  color: #00a15a;
  border: 1px solid #00a15a !important;
  background: #d0fff0;
}

.typeBoxColor_red {
  color: #ff2544;
  border: 1px solid #ff2544 !important;
  background: #ffc5cd;
}

.typeBoxColor_orange {
  color: #f77500;
  border: 1px solid #f77500 !important;
  background: #ffe3ca;
}

.tableContent {
  display: flex;
  border-top: 1px solid #dddddd;

  height: calc(100vh - 320px);
}

.adTimeLimeBox {
  margin-top: -3px;
  padding-bottom: 99px;
  height: calc(100vh - 320px);
  overflow-x: hidden;
}

.headerBox {
  height: 72px;
  border-top: 1px solid #dddddd;
}

.adTypeAndPositionOuterBox {
  position: absolute;
  width: 240px;
  height: calc(100vh - 320px);
  overflow: hidden;
  // box-shadow: 0 0 10px rgb(0 0 0 / 12%);
}

.adTypeAndPositionBox {
  position: absolute;
  width: 257px;
  height: calc(100vh - 320px);
  overflow-y: scroll;
  padding-top: 72px;
  padding-bottom: 27px;
  background: #fff;
  z-index: 99;
  // IE 10+
  // -ms-overflow-style: none;
  // // Firefox
  // overflow: -moz-scrollbars-none;

  // &::-webkit-scrollbar {
  //   display: none;
  // }
}

.adTypeAndPosition_fixed {
  position: fixed;
  top: 208px;
  left: 81px;
  width: 240px;
  text-align: center;
  background: #fff;
  z-index: 99;
}

// 广告类型及位置样式
.adTypeAndPosition {
  // display: inline-block;
  // width: 240px;
  height: 72px;
  line-height: 72px;
  font-size: 16px;
  color: #524d4a;
  text-align: center;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  vertical-align: top;
}

.mainTable {
  position: relative;
  margin-left: 240px;
}

// 表格每一行样式
.tableHeader {
  display: inline-block;
  position: relative !important;
  top: 0px;
}

.tableHeader,
.tableTr {
  position: relative;
  height: 72px;
  line-height: 72px;
  border-bottom: 1px solid #dddddd;

  // 日期格子样式
  .calendarDayBox {
    display: inline-block;
    position: relative;
    width: 69px;
    height: 100%;
    border-right: 1px solid #dddddd;
    border-bottom: none !important;

    // 今日日期样式
    .day_active {
      display: inline-block;
      top: 7px !important;
      left: 16px !important;
      width: 36px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      border-radius: 50%;
      color: #fff !important;
      background: #006eff;
    }

    // 日期样式
    :first-child {
      position: absolute;
      top: -11px;
      left: 28px;
      font-size: 16px;
      color: #524d4a;
    }

    // 星期几样式
    :last-child {
      position: absolute;
      bottom: -20px;
      left: 12px;
      font-size: 14px;
      color: #888888;
      border-bottom: none;
    }
  }

  // 时间线样式
  .timeLine {
    position: absolute;
    top: 17px;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    border-radius: 2px 0px 0px 2px;
    padding: 0 26px;
    z-index: 10;

    .timeLimeInnerBox {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 100%;
    }

    .eclipase {
      position: absolute;
      top: 0;
      right: 0;
      border: none !important;
    }

    .timeLimeTextBox {
      display: flex;
      justify-content: space-between;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; // 显示省略号
    }

    .timeLineIcon {
      width: 18px;
      height: 18px;
      margin-top: 7px;
    }

    .timeLineName {
      margin-right: 26px;
      border-bottom: none;
    }

    .launchTime {
      margin-right: 26px;
    }

    .launchTimeSlot {
      border-bottom: none !important;
    }
  }

  // 清除每一行表格最后一个元素的右边框
  :last-child {
    border-right: none;
  }
}

.el-empty {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}
</style>
